<template>
  <div id="app" >
    <transition :name="transitionName">
      <keep-alive>
      <router-view class="Router"></router-view>
      </keep-alive>
    </transition>

  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
        transitionName: ""
    }
  },
  // watch: {
  //   '$route' (to, from) {
  //     const toDepth = to.path.split('/').length
  //     const fromDepth = from.path.split('/').length
  //     console.log(to.path.split('/'));
  //     console.log(from.path.split('/'));
  //     this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  //   }
  // }
  watch: {
　　　'$route' (to, from) {
　　　　let isBack = this.$router.isBack  //  监听路由变化时的状态为前进还是后退
　　　　　　if(isBack) {
　　　　　　　　this.transitionName = 'slide-right'
　　　　　　} else {
　　　　　　       this.transitionName = 'slide-left'
　　　　　}
　　this.$router.isBack = false
　　}
　  }

}

</script>

<style lang="stylus">
.Router {
   position: absolute;
   width: 100%;
   height: 100%;
   transition: all .4s ease;
}

.slide-left-enter,
.slide-right-leave-active {
   opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
   opacity: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100% 0);
}
</style>
